<template>
    <div>
        <article>
            <h2>{{todo?.title}}</h2>
            <p>{{todo?.description}}</p>
            <p>{{todo?.completed}}</p>
        </article>
    </div>
</template>

<script setup lang="ts">
import { TodosApi } from '~/api';
const $route = useRoute()

let {data:res} = await useAsyncData(`todo/${$route.params.id}`,() => TodosApi.getTodo(Number($route.params.id)))
let todo = ref(res.value?.data)
console.log("todo",todo.value)

// async function fetchData(id:number) {
//     todo.value = (await TodosApi.getTodo(id)).data
// }
// fetchData(Number($route.params.id))
</script>

<style scoped>

</style>